<template>
  <div class="publish-container">
    <a-form
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item ref="title" label="标题" name="title">
        <a-input v-model:value="form.title" />
      </a-form-item>
      <a-form-item label="内容" name="content">
        <a-textarea v-model:value="form.content" />
      </a-form-item>
      <a-form-item label="封面" name="cover">
        <a-radio-group v-model:value="form.cover.type">
          <a-radio :value="item.id" v-for="item in coverArr" :key="item.id">
            {{ item.name }}
          </a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="频道" name="channelId">
        <a-select
          v-model:value="form.channel_id"
          placeholder="please select your zone"
        >
          <a-select-option
            :value="item.id"
            v-for="item in channels"
            :key="item.id"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item :wrapper-col="{ span: 14, offset: 2 }">
        <a-button type="primary" @click="onSubmit()">
          发表
        </a-button>
        <a-button style="margin-left: 40px;" @click="onSubmit(true)">
          存入草稿
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
import { coverArr } from './data'
import { useRoute } from 'vue-router'
import { reactive, toRefs, onMounted } from 'vue'

import {
  getArticle,
  postArticles,
  updateArticle,
  getArticleChannels
} from '@/api/articles'

export default {
  name: 'Publish',
  setup() {
    const labelCol = { span: 2 }
    const wrapperCol = { span: 20 }
    const route = useRoute()
    const id = route.query.id
    const state = reactive({
      channels: [],
      form: {
        title: '',
        content: '',
        cover: {
          // -1:自动 0 无图 1:1张 3:3张
          type: 0,
          images: []
        },
        channel_id: null
      }
    })

    // 加载文章内容
    const getArticleData = async id => {
      const res = await getArticle(id)
      state.form = res.data
    }

    // 更新文章
    const updateArticleData = async draft => {
      await updateArticle(id, state.form, draft)
    }

    // 获取文章频道
    const getArticleChannelsData = async () => {
      const res = await getArticleChannels()
      const { channels } = res.data
      state.channels = channels || []
    }
    // 发布文章
    const postArticle = async draft => {
      const res = await postArticles(state.form, draft)
      console.log(res, 12312)
    }

    const onSubmit = draft => {
      // 判断修改还是发布
      if (id) return updateArticleData(draft)

      postArticle(draft)

      // this.$refes.ruleForm
      //   .validate()
      //   .then(() => {
      //     console.log('values', this.form)
      //   })
      //   .catch(error => {
      //     console.log('error', error)
      //   })
    }

    onMounted(() => {
      // 判断是修改还是发布
      if (id) return getArticleData(id)

      getArticleChannelsData()
    })
    return {
      ...toRefs(state),
      labelCol,
      wrapperCol,
      coverArr,
      onSubmit
    }
  },
  data() {
    return {
      rules: {
        name: [
          {
            required: true,
            message: 'Please input Activity name',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 5,
            message: 'Length should be 3 to 5',
            trigger: 'blur'
          }
        ],
        region: [
          {
            required: true,
            message: 'Please select Activity zone',
            trigger: 'change'
          }
        ],
        date1: [
          {
            required: true,
            message: 'Please pick a date',
            trigger: 'change',
            type: 'object'
          }
        ],
        type: [
          {
            type: 'array',
            required: true,
            message: 'Please select at least one activity type',
            trigger: 'change'
          }
        ],
        resource: [
          {
            required: true,
            message: 'Please select activity resource',
            trigger: 'change'
          }
        ],
        desc: [
          {
            required: true,
            message: 'Please input activity form',
            trigger: 'blur'
          }
        ]
      }
    }
  }
}
</script>
